<template>
    <div class="settlement-page">
        <el-breadcrumb separator=">">
            <el-breadcrumb-item>系统管理</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/qualification' }">运营资质</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="settlement-content">
            <div class="title">
                运营资质
            </div>
            <div class="content">
                <!-- 法人/经营负责人信息 -->
                <div class="item">
                    <div class="name">法人/经营负责人信息</div>
                    <el-form style="padding: 0 80px;margin-top:10px" label-width="200" label-position="left">
                        <el-form-item label="运营主体名称：">
                            常熟市XXXX有限公司
                        </el-form-item>
                        <el-form-item label="法人/经营负责人姓名：">
                            刘XX
                        </el-form-item>
                        <el-form-item label="法人/经营负责人身份证号码：">
                            320722*******5211
                        </el-form-item>
                        <el-form-item label="法人/经营负责人手机号码：">
                            13306236880
                        </el-form-item>
                    </el-form>
                </div>
                <!-- 运营商信息 -->
                <div class="item">
                    <div class="name">运营商信息</div>
                    <el-form style="padding: 0 80px;margin-top:10px" :model="ruleForm" label-width="200" label-position="left">
                        <el-form-item label="运营商名称：">
                            <el-input v-model="ruleForm.name" placeholder="" />
                        </el-form-item>
                        <el-form-item label="法人/经营负责人姓名：">
                            刘XX
                        </el-form-item>
                        <el-form-item label="营业执照：" style="position: relative;margin-bottom:40px;">
                            <el-upload style="margin-left:20px" class="avatar-uploader"
                                action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                                :show-file-list="false" :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload">
                                <img v-if="ruleForm.licenseImg" :src="ruleForm.licenseImg" class="avatar" />
                                <el-icon v-else class="avatar-uploader-icon">
                                    <Plus />
                                </el-icon>
                            </el-upload>
                            <div class="tip">支持 .jpg .jpeg .png 格式，小于1M。</div>
                        </el-form-item>
                        <el-form-item label="食品流通许可证：" style="position: relative;">
                            <el-upload style="margin-left:20px" class="avatar-uploader"
                                action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                                :show-file-list="false" :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload">
                                <img v-if="ruleForm.permitImg" :src="ruleForm.permitImg" class="avatar" />
                                <el-icon v-else class="avatar-uploader-icon">
                                    <Plus />
                                </el-icon>
                            </el-upload>
                            <div class="tip">支持 .jpg .jpeg .png 格式，小于1M。</div>
                        </el-form-item>
                    </el-form>
                </div>
                <!-- 服务电话 -->
                <div class="item">
                    <div class="name">服务电话</div>
                    <el-form style="padding: 0 80px;margin-top:10px" label-width="200" label-position="left">
                        <el-form-item label="客服电话：">
                            <el-input v-model="ruleForm.name" placeholder="" />
                        </el-form-item>
                        <el-form-item label="服务与隐私协议：">
                            <el-input v-model="ruleForm.name" placeholder="" />
                        </el-form-item>
                    </el-form>
                </div>
                <!-- 保存 -->
                <div class="aic">
                    <el-button round color="#0071bb" @click="submitForm()">保存</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps } from 'element-plus'
import { ElMessage } from 'element-plus'
interface RuleForm {
  name: string
  licenseImg:string
  permitImg:string
}
const ruleForm = reactive<RuleForm>({
    name: '',
    licenseImg:'',
    permitImg:''
})
const submitForm = () => {

}
</script>

<style scoped lang="scss">
.settlement-page {
    padding: 20px 10px;
    box-sizing: border-box;
    background-color: #f1f1f1;
}

.settlement-content {
    padding: 10px;
    background: #fff;
    margin-top: 20px;
    border-radius: 4px;
}
.aic{
    display: flex;
    justify-content: center;
}

.title {
    color: #4D4D4D;
}

.content {
    width: 70%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 auto;
}

.item {
    width: 100%;
    border: 1px solid #f0f0f0;
    margin-top: 20px;

    .name {
        height: 40px;
        line-height: 40px;
        background: #00ffff;
        padding: 0 80px;
        box-sizing: border-box;
    }
    .tip{
        color: #808080;
        font-size: 12px;
        position: absolute;
        bottom: -30px;
        left: 20px;
    }

}

</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
  background: #e5e5e5;
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>